<template>
	<view>
		<!-- <u-navbar
			bgColor="#2979ff"
			:title="targetName"
			:titleStyle="titleColor"
			leftIcon="arrow-left"
			leftIconColor="white"
			leftClick="toBack()"
			:autoBack="true"
			:safeAreaInsetTop="true"
			:placeholder="false"
		></u-navbar> -->
		<y-chat
			:userId="userId"
			:messageList="list"
			:historyList="historyList"
			:defaultOptions="defaultOptions"
			:tagOptions="tagOptions"
			:sheetList="sheetList"
			@onRefresh="getNext"
			@playPhoto="playPhoto"
			@playCamera="playCamera"
			@send="send"
		></y-chat>
		
		
	</view>
</template>

<script>
	// 用来获取随机id的, 正式项目不需要
	function getRandomNum(){
		return Math.floor(Math.random() * 100).toString() + Math.floor(Math.random() * 100).toString()
	}
	export default {
		data() {
			return {
				userId: 1,
				targetName: '',
				titleColor:{'color':'white'},
				tagOptions: {
					1:{
						text: '管理员',
						bgColor: '#ff4100',
						color: '#fff'
					},
				},
				defaultOptions: {
					userId: 'userId',
					msgId: 'id',
					name: 'name',
					message: 'message',
					img: 'img',
					time: 'time',
					avator: 'avator',
					tagLabel: 'tagLabel'
				},
				list: [],
				historyList:[],
				sheetList: [
				 //  {
					// img: '',
					// icon: 'red-packet-fill',
					// name: '红包'
				 //  }
				]
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.name
			})
			//从消息列表页面跳转过来
			if(option.name != null){
				this.targetName = option.name
			}
			
			//setTimeout(() => {
			// 	this.list = [
			// 		{
			// 			userId: 2,
			// 			id: 1,
			// 			name: '白',
			// 			message: 'ddd',
			// 			time: new Date().getTime(),
			// 			avator: '',
			// 			img: 'https://tva3.sinaimg.cn/large/9bd9b167gy1g4lhmt4zm5j21hc0xcnhs.jpg'
			// 		},
			// 		{
			// 			userId: 2,
			// 			id: 2,
			// 			name: '黑',
			// 			message: 'aaa',
			// 			time: new Date().getTime(),
			// 			avator: '',
			// 			img: require('@/static/ces.png'),
			// 			tagLabel: 1
			// 		},
			// 		{
			// 			userId: 2,
			// 			id: 6,
			// 			name: '黑',
			// 			message: 'aaa',
			// 			time: new Date().getTime(),
			// 			avator:''
			// 		},
			// 		{
			// 			userId: 1,
			// 			id: 7,
			// 			name: '白',
			// 			message: 'ccc',
			// 			time: new Date().getTime(),
			// 			avator:''
			// 		},
					
			// 	]
			// },1000)
		},
		methods: {
			getNext(stop){
				// 请求接口 || ... 之后调用stop方法停止动画
				setTimeout(() => {
					this.getList()
					stop()
				}, 100)
			},
			getList(){
				// 假设list是获取到的历史消息
				const list = [
					{
						userId: 1,
						id: getRandomNum(), //不重复id
						name: '黑',
						message: 'cc121c',
						time: new Date().getTime(),
						avator:'',
					},
					{
						userId: 1,
						id: getRandomNum(),
						name: '黑',
						message: 'cc121c',
						time: new Date().getTime(),
						avator:'',
					},
					{
						userId: 1,
						id: getRandomNum(),
						name: '黑',
						message: 'cc121c',
						avator:'',
					},
					{
						userId: 1,
						id: getRandomNum(),
						name: '黑',
						message: 'cc121c',
						time: new Date().getTime(),
						avator: '',
						tagLabel: 1
					}
				]
				this.historyList = list
			},
			playPhoto(file){
				console.log(file,'file')
			},
			playCamera(file){
				console.log(file,'file')
			},
			send(val){
				const r = Math.random()
				const userId = r + 1 > 1.5 ? 1 : 2;
				//console.log('userId', userId)
				this.list = [
					{
						userId: userId,
						id: getRandomNum(), // id必须是唯一值
						name: '白',
						message: val,
						time: new Date().getTime(),
						avator: 'https://tva3.sinaimg.cn/large/9bd9b167gy1g4lhmt4zm5j21hc0xcnhs.jpg',
						//tagLabel: 1
					}
				]
				
			}
		}
	}
</script>

<style>
</style>
